@navbar-backcolor: #99ccff;
html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

p, li, ul {
  margin: 0;
  padding: 0;
}

.wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  max-height: 100%;
  max-width: 100%;
}

.navbar {
  position: relative;
  width: 100%;
  height: 41px;
  background: @navbar-backcolor;

  // border-bottom: 1px solid #ddd;

  .logo {
    position: relative;
    float: left;
    margin: 7px 10px 0;

    img {
      float: left;
      width: 23px;
      height: 25px;
      cursor: pointer;
    }

    i {
      display: block;
      float: left;
      background: none repeat scroll 0 0 #fff;
      height: 23px;
      vertical-align: middle;
      width: 2px;
      margin: 2px 6px 0;
      box-sizing: border-box;
    }

    span {
      float: left;
      font: normal normal normal 16px/32px "microsoft yahei";
      color: #fff;
      cursor: pointer;
    }
  }

  .nav-title {
    margin: 7px 10px 0 25px;
    font: normal normal normal 16px/32px "microsoft yahei";
    color: #fff;
    float: left;

    .edit {
      float: left;
      margin-top: 8px;
      margin-right: 2px;
      display: inline-block;
      width: 16px;
      height: 16px;
      background: url(../css/imgs/dituhui/book.png) no-repeat center center;
      cursor: pointer;
    }
  }
}


.body-container {
  position: relative;
  width: 100%;
  height: ~'calc(100% - 41px)';
}

.nav-vertical {
  position: relative;
  width: 220px;
  height: 100%;
  float: left;
  background: @navbar-backcolor;
  border-top: 1px solid #fff;
  box-sizing: border-box;

  ul {
    list-style: none;
    li {
      list-style: none;
      margin: 15px;
      color: #fff;
      font: normal normal normal 14px/22px "microsoft yahei";
    }
  }
}

.map {
  position: relative;
  width: ~'calc(100% - 221px)';
  height: 100%;
  z-index: 0;
  float: left;
}

#map{
  border: 0;
}

.active {
  color: green;
}